<template>
  <el-dialog v-move title="动作序列详情" :width="formProps.dialogWidth" :close-on-click-modal="false"
    :visible.sync="dialogVisible" append-to-body :before-close="closeDialog">
    <template #title>
      <div>
        <span class="mr-10" style="font-weight:bolder">动作序列详情</span>
        <el-tooltip effect="light" content="刷新" placement="bottom">
          <el-button plain type="warning" circle size="mini" :loading="tableLoading" @click="getTableList"
            icon="el-icon-refresh-right"></el-button>
        </el-tooltip>
      </div>
    </template>
    <z-table :list="list" :columns="columns" :tableProps="tableProps" :tableLoading="tableLoading">
      <template #content="{key,row}">
        <span v-if="key == 'taskType'" :class="getContentName(row[key],'typeOptions',true)">
          {{getContentName(row[key],'typeOptions')}}
        </span>
        <el-tag :type="getContentName(row[key],'statusOptions',true)"
          v-else-if="key == 'status'">{{getContentName(row[key],'statusOptions')}}</el-tag>

        <span v-else>{{row[key]}}</span>
      </template>
    </z-table>
  </el-dialog>
</template>

<script>
import ZTable from '@/views/_common/table.vue'
export default {
  name: 'status-detail-dialog',
  components: {
    ZTable,
  },
  props: {
    visible: { type: Boolean, default: false },
    query: { type: [Number, String], default: '111' },
    isAutoRequest: { type: Boolean, default: false },
    controTime: { type: Number, default: 2 },
  },
  computed: {
    dialogVisible: {
      get() {
        if (this.visible) {
          this.init()
        }
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      },
    },
    refreshType: function () {
      return Number(!this.refreshLoading)
    },
  },
  data() {
    return {
      formProps: {
        dialogWidth: '70%',
      },
      tableProps: {
        border: true,
        hideOperations: true,
        // opsColWith: 140, //不定义默认80
        // showSelection: true, // 是否开启复选
        // expandable: true, //是否展开行
        // showIndexCol: false, //是否显示索引列
        // indexColWidth: 50, //索引列宽度
      },
      tableLoading: false,
      columns: [
        { title: '任务号', key: 'actionId', width: 120 },
        { title: '主任务', key: 'taskId', width: 120 },
        { title: '任务类型', key: 'taskType', width: 120 },
        { title: '起始位置', key: 'startLocationUserCode', width: 120 },
        { title: '结束位置', key: 'endLocationUserCode' },
        { title: '状态', key: 'status' },
        { title: '下发时间', key: 'sentAt' },
        { title: '创建时间', key: 'createdAt' },
      ],
      list: [],
      typeOptions: [
        { label: '未知', value: 0, type: 'text-gray' },
        { label: '出库', value: 1, type: 'text-blue' },
        { label: '入库', value: 2, type: 'text-green' },
        { label: '移库', value: 3, class: 'bg-yellow' },
        { label: '回库', value: 4, class: 'bg-green' },
        { label: '跨库', value: 5, class: 'bg-yellow' },
      ],
      statusOptions: [
        { label: '新任务', value: 0, type: 'primary' },
        { label: '已发送', value: 1, type: 'success' },
        { label: '正在运行', value: 2, type: 'success' },
        { label: '暂停', value: 3, type: 'warning' },
        { label: '发生错误', value: 4, type: 'danger' },
        { label: '被取消', value: 5, type: 'info' },
        { label: '已完成', value: 6, type: 'success' },
        { label: '强制暂停', value: 9, type: 'warning' },
      ],
      isAutoRequestTimer: null, //自动触发的定时器
    }
  },
  destroyed() {},
  methods: {
    // 创建接口自动触发
    closeDialog() {
      this.$emit('update:visible', false)
    },
    // 初始化
    init() {
      if (!this.query) return
      this.getTableList()
    },
    formatList(data) {
      return data.map((x) => {
        return x
      })
    },
    getContentName(value, thisKey, isType = false) {
      if (!thisKey) return ''
      if (this[thisKey] && this[thisKey].length) {
        let tmp = this[thisKey].find((x) => x.value == value)
        return tmp ? tmp[isType ? 'type' : 'label'] : ''
      }
    },
    // 获取tableList 数据
    getTableList() {
      this.tableLoading = true
      this.$request(this.$api.wcsUrl + 'wcs/task/GetEquipmentActionList', { deviceName: this.query })
        .then((r) => {
          this.list = this.formatList(r)
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
